
// hooks 辅助函数的特点:

// 01: hook 函数只能在函数组件中使用,类组件不能使用, 也可以在其他hooks函数中使用

// 02: hook 函数不能被有条件的使用比如必将hook函数写在条件语句了 这不错误的

// useState 
// 作用: 使用该hook 函数实现函数组件的有状态
import React,{useState} from 'react';
// const [state, setstate] = useState(initialState);
// state 变量: 表示访问该 state中的数据 initialState
// setstate 函数: 表示只能通过setstate该方法来修改 state
// setstate() 修改 state 数据 有2种方式: 
// 第一种: 直接将值赋值给函数的形参 setstate(值) 
const Father = () => {

    // 01:基本数据
    let [count, setCount] = useState(100);

    // 定义事件
    const addCount = ()=>{
        // setCount(101)
        // setCount(count++)
        setCount(()=>{
            count++
            return count
        })
    }

    //02: 对象数据类型
    let [userinfo, setUserinfo] = useState({
        name:"宋翠",
        age:18
    });

    const addAge = ()=>{
        //注意: userinfo usestate 会认为你没改,所以不会更新
        // 函数返回形式的对象结构需要保留原数据,否则会替换的
        // userinfo.age++
        setUserinfo((val)=>{
            console.log(val); // 该val形参就是要修改的原对象
            return{
                ...userinfo,
                age:userinfo.age+1
            }
        })
    }

    // 03: 数组的修改
     let [nameArr, setNameArr] = useState(['李东','王贺']);
    const addMen= ()=>{
        // nameArr.push('李旺源')
        // console.log(nameArr);
        // setNameArr(nameArr);
        // 注意: 参数nameArr还是以前的nameArr, usestate 认为数据没变,随意不会更新
        setNameArr([...nameArr,'李旺源'])
    }

    return (
        <div>
            <p>{count}</p>
            <p onClick={addCount}>修改count</p>
            <hr/>
             <p>{userinfo.name}=={userinfo.age}</p>
            <p onClick={addAge}>修改age</p>
              <hr/>
            <ul>
                {
                    nameArr.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
            <p><button onClick={addMen}>新增人员</button></p>
        </div>
    );
}

export default Father;
